<template>
  <view class="content">
    <view class="navbar">
      <view
        v-for="(item, index) in navList"
        :key="index"
        class="nav-item"
        :class="{ current: tabCurrentIndex == item.state }"
        @click="tabClick(item, item.state)"
      >
        {{ item.text }}
      </view>
    </view>

    <scroll-view
      v-if="orderList.length > 0"
      class="list-scroll-content"
      scroll-y
      @scrolltolower="asideScroll"
    >
      <view v-for="(item, index) in orderList" :key="index" class="order-item">
        <view class="" @click="goDetails(item)">
          <view class="i-top b-b">
            <text class="time">{{ item.createTime }}</text>
            <view class="state" v-if="item.orderStatus == 0">待付款</view>
            <view class="state" v-else-if="item.orderStatus == 1">待接单</view>
            <view class="state" v-else-if="item.orderStatus == 2">待发货</view>
            <view class="state" v-else-if="item.orderStatus == 3">待收货</view>
            <view class="state" v-else-if="item.orderStatus == 4">服务中</view>
            <view class="state" v-else-if="item.orderStatus == 5">已完成</view>
            <view class="state" v-else-if="item.orderStatus == 6">已取消</view>
            <view class="state" v-else-if="item.orderStatus == 7">已失效</view>
            <view class="state" v-else-if="item.orderStatus == 8">退款中</view>
            <view class="state" v-else-if="item.orderStatus == 9"
              >退款成功</view
            >
            <view class="state" v-else-if="item.orderStatus == 10"
              >退款失败</view
            >
            <text
              v-if="item.state === 9"
              class="del-btn yticon icon-iconfontshanchu1"
              @click="deleteOrder(index)"
            ></text>
          </view>

          <!-- <scroll-view v-if="item.orderItemList.length > 1" class="goods-box" scroll-x>
							<view v-for="(goodsItem, goodsIndex) in item.orderItemList" :key="goodsIndex" class="goods-item">
								<image class="goods-img" v-if="goodsItem.goodsSpecification" :src="goodsItem.goodsSpecification.specificationImages" mode="aspectFill"></image>
								<image v-else class="goods-img" :src="goodsItem.previewUrl" mode="aspectFill"></image>
							</view>
						</scroll-view> -->
          <view
            v-if=""
            class="goods-box-single"
            v-for="(goodsItem, goodsIndex) in item.orderItemList"
            :key="goodsIndex"
          >
            <image
              class="goods-img"
              v-if="goodsItem.goodsSpecification"
              :src="goodsItem.goodsSpecification.specificationImages"
              mode="aspectFill"
            ></image>
            <image
              v-else
              class="goods-img"
              :src="goodsItem.previewUrl"
              mode="aspectFill"
            ></image>
            <view class="right">
              <text class="title clamp">{{ goodsItem.goodName }}</text>

              <text class="attr-box" v-if="goodsItem.goodsSpecification">
                {{
                  goodsItem.goodsSpecification.specificationName
                    .replace(/\"/g, "")
                    .replace(/\{|}/g, "")
                    .replace(/\,/g, "+")
                }}
              </text>
              <view
                class=""
                style="
                  display: flex;
                  align-items: center;
                  justify-content: space-between;
                "
              >
                <text class="price">{{ goodsItem.goodsPrice }}</text>
                <text>x {{ goodsItem.goodsNum }}</text>
              </view>
            </view>
          </view>
          <view class="price-box">
            共
            <text class="num">{{ item.goodsTotalNum }}</text>
            件商品 实付款
            <text class="price">{{ item.payMoney }}</text>
          </view>
        </view>
        <view class="action-box b-t">
          <button
            class="action-btn"
            v-if="item.orderStatus == 0"
            @click="cancelOrder(item.id)"
          >
            取消订单
          </button>
          <button
            class="action-btn"
            v-if="
              item.orderStatus == 5 ||
              item.orderStatus == 6 ||
              item.orderStatus == 7 ||
              item.orderStatus == 9 ||
              item.orderStatus == 10
            "
            @click="deleteOrder(item.id)"
          >
            删除订单
          </button>
          <button
            v-if="item.orderStatus == 0"
            class="action-btn recom"
            @click="goPay(item)"
          >
            立即支付
          </button>
          <button
            v-if="item.orderStatus == 1 || item.orderStatus == 2"
            class="action-btn recom"
            @click="userApplyOrderRefund(item.orderNo)"
          >
            申请退款
          </button>
        </view>
      </view>
    </scroll-view>
    <view class="none_list_box" v-else style="margin-top: 200rpx">
      <uv-empty mode="order"></uv-empty>
    </view>
  </view>
</template>

<script>
import {
  searchUserOrderListByStatus,
  cancelOrder,
  delOrder,
  userApplyOrderRefund,
} from "../../utils/api.js";

export default {
 
  data() {
    return {
      tabCurrentIndex: 0,
      navList: [
        {
          state: 8,
          text: "退款中",
        },
        {
          state: 9,
          text: "退款成功",
        },
        {
          state: 10,
          text: "退款失败",
        },
        
      ],
      orderStatus: -1,
      startPage: 1,
      orderList: [],
      tatol: 0,
    };
  },

  onLoad(options) {
    this.orderStatus = options.state;
    this.tabCurrentIndex = options.state;
  },
  // onReachBottom() {
  // 	console.log(this.orderList.length, this.total);
  // 	if (this.orderList.length < this.total) {
  // 		this.startPage++;
  // 		this.loadData();
  // 	}
  // },
  onShow() {
    this.loadData();
  },
  methods: {
    asideScroll() {
      if (this.orderList.length < this.total) {
        this.startPage++;
        this.loadData();
      }
    },
    //顶部tab点击
    tabClick(item, index) {
      console.log(index);
      this.startPage = 1;
      this.tabCurrentIndex = index;
      this.orderStatus = item.state;
      this.loadData();
    },
    //获取订单列表
    loadData(source) {
      uni.showLoading();
      let data = {
        orderStatus: this.orderStatus,
        startPage: this.startPage,
      };
      searchUserOrderListByStatus(data).then((res) => {
        if (res.code == 200) {
          if (this.startPage == 1) {
            this.orderList = [];
          }
          let arr = [];
          arr = this.orderList.concat(res.body.list);
          this.orderList = arr;
          console.log(this.orderList);
          // this.show = false;
          uni.hideLoading();
          this.orderList.forEach((item) => {
            if (typeof item.orderItemList[0].extJson === "string") {
              item.orderItemList[0].extJson = JSON.parse(
                item.orderItemList[0].extJson
              );
            }
          });
          this.total = res.body.total;
        }
      });
    },

    //swiper 切换

    //删除订单
    deleteOrder(id) {
      let ids = id.toString();
      uni.showModal({
        title: "提示",
        content: "您确定要删除订单吗？",
        cancelText: "取消",
        confirmText: "确定",
        success: (res) => {
          if (res.confirm) {
            delOrder({ ids: ids }).then((ress) => {
              if (ress.code == 200) {
                this.loadData();
              }
            });
            console.log("comfirm"); //点击确定之后执行的代码
          } else {
            console.log("cancel"); //点击取消之后执行的代码
          }
        },
        fail() {},
      });
    },
    //取消订单
    cancelOrder(id) {
      let ids = id.toString();
      uni.showModal({
        title: "提示",
        content: "您确定要取消订单吗？",
        cancelText: "取消",
        confirmText: "确定",
        success: (res) => {
          if (res.confirm) {
            cancelOrder({ orderId: ids }).then((ress) => {
              if (ress.code == 200) {
                this.loadData();
              }
            });
            console.log("comfirm"); //点击确定之后执行的代码
          } else {
            console.log("cancel"); //点击取消之后执行的代码
          }
        },
        fail() {},
      });
    },
    // cancelOrder(item) {
    // 	uni.showLoading({
    // 		title: '请稍后'
    // 	});
    // 	setTimeout(() => {
    // 		let { stateTip, stateTipColor } = this.orderStateExp(9);
    // 		item = Object.assign(item, {
    // 			state: 9,
    // 			stateTip,
    // 			stateTipColor
    // 		});

    // 		//取消订单后删除待付款中该项
    // 		let list = this.navList[1].orderList;
    // 		let index = list.findIndex(val => val.id === item.id);
    // 		index !== -1 && list.splice(index, 1);

    // 		uni.hideLoading();
    // 	}, 600);
    // },
    goPay(item) {
      setTimeout(() => {
        uni.navigateTo({
          url: `/pages/money/pay?info=${encodeURIComponent(
            JSON.stringify(item)
          )}`,
        });
      }, 300);
    },
    goDetails(item) {
      uni.navigateTo({
        url: `/pages/order/orderDetail?info=${encodeURIComponent(
          JSON.stringify(item)
        )}`,
      });
    },
    userApplyOrderRefund(id) {
      uni.navigateTo({
        url: `/pages/order/refund/refund?id=${id}`,
      });
    },
    //订单状态文字和颜色
    orderStateExp(state) {
      let stateTip = "",
        stateTipColor = "#ff633d";
      switch (+state) {
        case 1:
          stateTip = "待付款";
          break;
        case 2:
          stateTip = "待发货";
          break;
        case 9:
          stateTip = "订单已关闭";
          stateTipColor = "#909399";
          break;

        //更多自定义
      }
      return { stateTip, stateTipColor };
    },
  },
};
</script>

<style lang="scss">
page,
.content {
  background: #f8f8f8;
  height: 100%;
}

.swiper-box {
  height: calc(100% - 40px);
}
.list-scroll-content {
  height: 100%;
}

.navbar {
  display: flex;
  height: 40px;
  padding: 0 5px;
  background: #fff;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.06);
  position: relative;
  z-index: 10;
  .nav-item {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    font-size: 15px;
    color: #303133;
    position: relative;
    &.current {
      color: #ff633d;
      &:after {
        content: "";
        position: absolute;
        left: 50%;
        bottom: 0;
        transform: translateX(-50%);
        width: 44px;
        height: 0;
        border-bottom: 2px solid #ff633d;
      }
    }
  }
}

.uni-swiper-item {
  height: auto;
}
.order-item {
  display: flex;
  flex-direction: column;
  padding-left: 30upx;
  background: #fff;
  margin-top: 16upx;
  .i-top {
    display: flex;
    align-items: center;
    height: 80upx;
    padding-right: 30upx;
    font-size: 28rpx;
    color: #303133;
    position: relative;
    .time {
      flex: 1;
    }
    .state {
      color: #ff633d;
    }
    .del-btn {
      padding: 10upx 0 10upx 36upx;
      font-size: 32rpx;
      color: #909399;
      position: relative;
      &:after {
        content: "";
        width: 0;
        height: 30upx;
        border-left: 1px solid #DCDFE6;
        position: absolute;
        left: 20upx;
        top: 50%;
        transform: translateY(-50%);
      }
    }
  }
  /* 多条商品 */
  .goods-box {
    height: 160upx;
    padding: 20upx 0;
    white-space: nowrap;
    .goods-item {
      width: 120upx;
      height: 120upx;
      display: inline-block;
      margin-right: 24upx;
    }
    .goods-img {
      display: block;
      width: 100%;
      height: 100%;
    }
  }
  /* 单条商品 */
  .goods-box-single {
    display: flex;
    padding: 20upx 0;
    .goods-img {
      display: block;
      width: 120upx;
      height: 120upx;
    }
    .right {
      flex: 1;
      display: flex;
      flex-direction: column;
      padding: 0 30upx 0 24upx;
      overflow: hidden;
      justify-content: space-between;
      .title {
        font-size: 30rpx;
        color: #303133;
        line-height: 1;
      }
      .attr-box {
        font-size: 26rpx;
        color: #909399;
        padding: 10upx 0upx;
      }
      .price {
        font-size: 30rpx;
        color: #ff633d;
        &:before {
          content: "￥";
          font-size: 24rpx;
          margin: 0 2upx 0 0upx;
        }
      }
    }
  }

  .price-box {
    display: flex;
    justify-content: flex-end;
    align-items: baseline;
    padding: 20upx 30upx;
    font-size: 26rpx;
    color: #909399;
    .num {
      margin: 0 8upx;
      color: #303133;
    }
    .price {
      font-size: 32rpx;
      color: red;
      &:before {
        content: "￥";
        font-size: 24rpx;
        margin: 0 2upx 0 8upx;
      }
    }
  }
  .action-box {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    height: 100upx;
    position: relative;
    padding-right: 30upx;
  }
  .action-btn {
    width: 160upx;
    height: 60upx;
    margin: 0;
    margin-left: 24upx;
    padding: 0;
    text-align: center;
    line-height: 60upx;
    font-size: 26rpx;
    color: #303133;
    background: #fff;
    border-radius: 100px;
    &:after {
      border-radius: 100px;
    }
    &.recom {
      background: #fff9f9;
      color: #ff633d;
      &:after {
        border-color: #f7bcc8;
      }
    }
  }
}

/* load-more */
.uni-load-more {
  display: flex;
  flex-direction: row;
  height: 80upx;
  align-items: center;
  justify-content: center;
}

.uni-load-more__text {
  font-size: 28upx;
  color: #999;
}

.uni-load-more__img {
  height: 24px;
  width: 24px;
  margin-right: 10px;
}

.uni-load-more__img > view {
  position: absolute;
}

.uni-load-more__img > view view {
  width: 6px;
  height: 2px;
  border-top-left-radius: 1px;
  border-bottom-left-radius: 1px;
  background: #999;
  position: absolute;
  opacity: 0.2;
  transform-origin: 50%;
  animation: load 1.56s ease infinite;
}

.uni-load-more__img > view view:nth-child(1) {
  transform: rotate(90deg);
  top: 2px;
  left: 9px;
}

.uni-load-more__img > view view:nth-child(2) {
  transform: rotate(180deg);
  top: 11px;
  right: 0;
}

.uni-load-more__img > view view:nth-child(3) {
  transform: rotate(270deg);
  bottom: 2px;
  left: 9px;
}

.uni-load-more__img > view view:nth-child(4) {
  top: 11px;
  left: 0;
}

.load1,
.load2,
.load3 {
  height: 24px;
  width: 24px;
}

.load2 {
  transform: rotate(30deg);
}

.load3 {
  transform: rotate(60deg);
}

.load1 view:nth-child(1) {
  animation-delay: 0s;
}

.load2 view:nth-child(1) {
  animation-delay: 0.13s;
}

.load3 view:nth-child(1) {
  animation-delay: 0.26s;
}

.load1 view:nth-child(2) {
  animation-delay: 0.39s;
}

.load2 view:nth-child(2) {
  animation-delay: 0.52s;
}

.load3 view:nth-child(2) {
  animation-delay: 0.65s;
}

.load1 view:nth-child(3) {
  animation-delay: 0.78s;
}

.load2 view:nth-child(3) {
  animation-delay: 0.91s;
}

.load3 view:nth-child(3) {
  animation-delay: 1.04s;
}

.load1 view:nth-child(4) {
  animation-delay: 1.17s;
}

.load2 view:nth-child(4) {
  animation-delay: 1.3s;
}

.load3 view:nth-child(4) {
  animation-delay: 1.43s;
}

@-webkit-keyframes load {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0.2;
  }
}
</style>
